import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { NavParams, ModalController, Events, AlertController, NavController, Platform } from '@ionic/angular';
import { PersonInfoPage } from '@pages/my/person-info/person-info';
import { CacheService } from '@services/cache.service';

@Component({
    selector: 'change-phone',
    templateUrl: 'change-phone.html',
    styleUrls: ['change-phone.scss']
})
export class ChangePhoneModal implements OnInit {
    phoneNumber = '17744986137';
    TheNext: Boolean;
    Phone = '17744986137';
    data: boolean;
    clock = 0;
    timer;
    VCode = '1123';
    constructor(public navParams: NavParams, public modalCtrl: ModalController, public events: Events,
        public navCtrl: NavController, public alertCtrl: AlertController, public cache: CacheService,
        private platform: Platform) {
        // this.platform.backButton.subscribe(res => {
        //     this.closeModal();
        // })
    }

    ngOnInit() {
        this.data = true;
        // this.Phone = this.cache.userinfo.phone;
    }


    async getVcode() {
        if (!this.IsTel(this.phoneNumber)) {
            const alert = await this.alertCtrl.create({
                cssClass: 'alert-model',
                header: '提示',
                subHeader: '手机号不正确',
                buttons: ['知道了']
            });
            alert.present();
        } else {
            if (this.phoneNumber === this.Phone) {
                const alert = await this.alertCtrl.create({
                    cssClass: 'alert-model',
                    header: '提示',
                    subHeader: '电话号码不能与之前号码一致',
                    buttons: ['知道了']
                });
                await alert.present();
            } else {
                if (this.data === true) {
                    this.startClock(60);
                } else {
                    const alert = await this.alertCtrl.create({
                        cssClass: 'alert-model',
                        header: '提示',
                        subHeader: '验证码发送失败，请检查您的电话号码',
                        buttons: ['知道了']
                    });
                    await alert.present();
                }
            }
        }
    }
    updateClock() {
        this.clock--;
        if (this.clock <= 0) {
            clearInterval(this.timer);
        }
    }

    startClock(time) {
        this.timer = setInterval(() => {
            this.updateClock();
        }, 1000);
        this.clock = time;
        this.updateClock();
    }

    // 下一步
    async Next(newPhone) {
        if (!newPhone || !this.IsTel(newPhone)) {
            const alert = await this.alertCtrl.create({
                cssClass: 'alert-model',
                header: '提示',
                subHeader: '绑定手机号失败',
                buttons: ['知道了']
            });
            await alert.present();
        } else {
            this.TheNext = true;
        }
    }

    Finish(newPhone) {
        this.modalCtrl.dismiss(newPhone);
    }


    // 正则表达式验证手机号码
    IsTel(Tel) {
        const re = new RegExp(/^1[0-9]{10}$/);
        const retu = re.test(Tel);
        if (retu) {
            return true;
        } else {
            return false;
        }
    }

    closeModal() {
        this.modalCtrl.dismiss();
    }
}
